<template>
	<div class="home">
		<div class="header">
			<div class="address_map" @click="$router.push({name:'address',params:{city:city}})">
				<i class="fa fa-map-marker"></i>
				<span>{{address}}</span>
				<i class="fa fa-sort-desc">
					
				</i>
			</div>
		</div>
		<div class="search_wrap" :class="{'fixedView':showFilter}" @click="$router.push('/search')">
			<div class="shop_search">
				<i class="fa fa-search"></i>
				搜索商家 商家名称
			</div>
		</div>
		<div id="container">
			<!-- //轮播 -->
			<mt-swipe :auto="4000" class="swiper">
			  <mt-swipe-item v-for="img,index in swipeImage" :key="index"><img :src="img" alt=""></mt-swipe-item>
			</mt-swipe>
			<!-- //分类 -->
			<mt-swipe :auto="0" class="entries">
			  <mt-swipe-item v-for="img1,index1 in entries" :key="index1" class="entry_wrap">
					<div class="foodentry" v-for="img2,index2 in img1" :key="index2">
						<img class="img_wrap" :src="img2.image" alt="">
							<span>{{img2.name}}</span>
					</div>
				</mt-swipe-item>
			</mt-swipe>
		</div>
		<!-- 推荐商家 -->
		<div class="shoplist-title">推荐商家</div>
		<filter-data :filterData="filterData" @searchFixed="showFilterView" @update="update"></filter-data>
		<!-- 商家信息 -->
		<mt-loadmore :top-method="loadData" :bottom-method="loadmore" :bottom-all-loaded="allLoaded"
		 ref="loadmore" :auto-fill="false" :bottomPullText="bottomPullText">
		 <div class="shoplist">
		 	<index-shop v-for="item,index in restaurants" :key="index" :restaurant="item.restaurant"></index-shop>
		 </div>
		</mt-loadmore>
		
		
	</div>
</template>

<script>
	import FilterData from '../components/Filter.vue'
	import { Swipe, SwipeItem } from 'mint-ui';
	import IndexShop from '../components/indexShop.vue'
	import { Loadmore } from 'mint-ui';
	
	export default{
		components:{
			FilterData,
			IndexShop
		},
		data(){
			return{
			  swipeImage:[],
				entries:[],
				filterData:null,
				showFilter:false,
				page:1,
				size:5,
				restaurants:[],//存放所有商家的容器
				allLoaded:false,
				bottomPullText:"上拉加载更多",
				data:null
			}
		},
		computed:{
			address(){
				return this.$store.getters.address
			},
			city(){
				//获取城市 如果获取不到就获取省份
				return this.$store.getters.location.addressComponent.city||
				this.$store.getters.location.addressComponent.province
			}
		},
		created() {
			this.getData()
		},
		methods:{
			loadmore(){
				if(!this.allLoaded){
					this.page++;
					this.$axios.post(`https://ele-interface.herokuapp.com/api/profile/restaurants/${this.page}/${this.size}`).then(res=>{
						console.log(res)
						this.$refs.loadmore.onTopLoaded();
						this.restaurants=res.data;
					})
				}
			},
			loadData(){
				this.page=1;
				this.allLoaded=false;
				this.bottomPullText="上拉加载更多"
				//获取商家信息
				this.$axios.post(`/api/profile/restaurants/${this.page}/${this.size}`,this.data).then(res=>{
			//加载完之后重新渲染
					this.$refs.loadmore.onBottomLoaded();
					if(res.data.length>0){
						res.data.forEach(item=>{
							this.restaurants.push(item)
						})
						if(res.data<this.size){
							this.allLoaded=true;
							this.bottomPullText="没有更多了"
						}
					}else{
						//数据为空
						this.allLoaded=true;
						this.bottomPullText="没有更多了"
					}
				})
				},
				
			getData(){
				this.loadData()
				this.$axios.get("https://ele-interface.herokuapp.com/api/profile/shopping").then(res=>{
					this.swipeImage=res.data.swipeImgs
					this.entries=res.data.entries
				});
				this.$axios.get("https://ele-interface.herokuapp.com/api/profile/filter").then(res=>{
					this.filterData=res.data;
				});
				
			},
			showFilterView(isShow){
				this.showFilter=isShow
			},
			update(condition){
				this.data=condition;
				this.loadData();
			}
			
		}
	}
</script>

<style scoped="scoped">
	.home {
	  width: 100%;
	  height: 100%;
	  overflow: auto;
	  box-sizing: border-box;
	}
	.header,.search_wrap {
	  background-color: #009eef;
	  padding: 10px 16px;
	}
	.header .address_map {
	  color: #fff;
	  font-weight: bold;
	}
	.address_map i {
	  margin: 0 3px;
	  font-size: 18px;
	}
	.address_map span {
	  display: inline-block;
	  width: 80%;
	  overflow: hidden;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	}
	.search_wrap .shop_search {
	  /* margin-top: 10px; */
		
	  background-color: #fff;
	  padding: 10px 0;
	  border-radius: 4px;
	  text-align: center;
	  color: #aaa;
	}
	.search_wrap{
		position: sticky;
		top: 0;
		z-index: 999;
		box-sizing: border-box;
	}
	.swiper{
		height: 100px;
	}
	.swiper img{
		width: 100%;
		height: 100px;
	}
	.entries {
	  background: #fff;
	  height: 47.2vw;
	  text-align: center;
	  overflow: hidden;
	}
	.foodentry {
	  width: 20%;
	  float: left;
	  position: relative;
	  margin-top: 2.933333vw;
	}
	.foodentry .img_wrap {
	  position: relative;
	  display: inline-block;
	  width: 12vw;
	  height: 12vw;
	}
	.img_wrap img {
	  width: 100%;
	  height: 100%;
	}
	.foodentry span {
	  display: block;
	  color: #666;
	  font-size: 0.32rem;
	}
	.shoplist-title {
	  display: flex;
	  align-items: flex;
	  justify-content: center;
	  height: 9.6vw;
	  line-height: 9.6vw;
	  font-size: 16px;
	  color: #333;
	  background: #fff;
	}
	.shoplist-title:after,
	.shoplist-title:before {
	  display: block;
	  content: "一";
	  width: 5.333333vw;
	  height: 0.266667vw;
	  color: #999;
	}
	.shoplist-title:before {
	  margin-right: 3.466667vw;
	}
	.shoplist-title:after {
	  margin-left: 3.466667vw;
	}
.fixedView{
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 999999999;
}
.mint-loadmore {
  height: calc(100% - 125px);
  overflow: auto;
}
</style>
